<?php use Fisharebest\Webtrees\I18N; ?>
<?php use Fisharebest\Webtrees\View; ?>

<?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('admin-users') => I18N::translate('User administration'), $title]]) ?>

<h1><?= $title ?></h1>

<form class="form-horizontal" name="newform" method="post" autocomplete="off" action="<?= e(route('admin-users-create')) ?>">
	<?= csrf_field() ?>

	<!-- REAL NAME -->
	<div class="row form-group">
		<label class="col-sm-3 col-form-label" for="real_name">
			<?= I18N::translate('Real name') ?>
		</label>
		<div class="col-sm-9">
			<input class="form-control" type="text" id="real_name" name="real_name" required maxlength="64" value="<?= e($real_name) ?>" dir="auto">
			<p class="small text-muted">
				<?= I18N::translate('This is your real name, as you would like it displayed on screen.') ?>
			</p>
		</div>
	</div>

	<!-- USER NAME -->
	<div class="row form-group">
		<label class="col-sm-3 col-form-label" for="username">
			<?= I18N::translate('Username') ?>
		</label>
		<div class="col-sm-9">
			<input class="form-control" type="text" id="username" name="username" required maxlength="32" value="<?= e($username) ?>" dir="auto">
			<p class="small text-muted">
				<?= I18N::translate('Usernames are case-insensitive and ignore accented letters, so that “chloe”, “chloë”, and “Chloe” are considered to be the same.') ?>
			</p>
		</div>
	</div>

	<!-- PASSWORD -->
	<div class="row form-group">
		<label class="col-sm-3 col-form-label" for="pass1">
			<?= I18N::translate('Password') ?>
		</label>
		<div class="col-sm-9">
			<input class="form-control" type="password" id="pass1" name="pass1" pattern = "<?= WT_REGEX_PASSWORD ?>" placeholder="<?= I18N::plural('Use at least %s character.', 'Use at least %s characters.', WT_MINIMUM_PASSWORD_LENGTH, I18N::number(WT_MINIMUM_PASSWORD_LENGTH)) ?>" required onchange="form.pass2.pattern = regex_quote(this.value);" autocomplete="new-password">
			<p class="small text-muted">
				<?= I18N::translate('Passwords must be at least 6 characters long and are case-sensitive, so that “secret” is different from “SECRET”.') ?>
			</p>
		</div>
	</div>

	<!-- CONFIRM PASSWORD -->
	<div class="row form-group">
		<label class="col-sm-3 col-form-label" for="pass2">
			<?= I18N::translate('Confirm password') ?>
		</label>
		<div class="col-sm-9">
			<input class="form-control" type="password" id="pass2" name="pass2" pattern = "<?= WT_REGEX_PASSWORD ?>" placeholder="<?= I18N::translate('Type the password again.') ?>" required autocomplete="new-password">
		</div>
	</div>

	<!-- EMAIL ADDRESS -->
	<div class="row form-group">
		<label class="col-sm-3 col-form-label" for="email">
			<?= I18N::translate('Email address') ?>
		</label>
		<div class="col-sm-9">
			<input class="form-control" type="email" id="email" name="email" required maxlength="64" value="<?= e($email) ?>">
			<p class="small text-muted">
				<?= I18N::translate('This email address will be used to send password reminders, website notifications, and messages from other family members who are registered on the website.') ?>
			</p>
		</div>
	</div>

	<div class="row form-group">
		<div class="offset-sm-3 col-sm-9">
			<button type="submit" class="btn btn-primary">
				<?= I18N::translate('save') ?>
			</button>
		</div>
	</div>
</form>

<?php View::push('javascript') ?>
<script>
  function regex_quote(str) {
    return str.replace(/[\\.?+*()[\](){}|]/g, "\\$&");
  }
</script>
<?php View::endpush() ?>
